//封装导航栏的结构函数
function rander1(resArr) {
    let html = "";
    resArr.forEach(item => {
        html += `<li><a>${item.title}</a></li>`;
    });
    return html
}

//封装商品列表的结构函数
function rander2(resArr2) {
    let html = "";

    resArr2.forEach(item => {
        html += `<div class="content-box">
    <em  class="left">${item.productImg}</em>
    <div class="right">
        <h4>${item.productName}</h4>
        <p class="p1">
            ${item.productPrice}
        </p>
        <div class="down">
            <div id="bar">
                <aside id="aside"> 100%</aside>
            </div>
             <b id="yiling">已领126张/余0张</b>
        </div>
        <div class="div">
            ${item.productCoupon}
            ${item.productHref}
        </div>
    </div>
</div> `
    })
    return html;
}
//请求导航栏的数据调用导航栏的结构函数对导航栏进行数据渲染
ajax({
    url: "http://chst.vip:1234/api/getbaicaijiatitle",
}).then(res => {
    let resArr = res.result;
    console.log(resArr);
    let ul = document.querySelector(".nav-ul");
    let html = rander1(resArr);
    ul.innerHTML = html;
    //获取导航栏的每个li添加点击事件
    let lis = ul.children;
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {

            for (i = 0; i < lis.length; i++) {
                lis[i].className = "none"
                lis[i].index = i;
            }
            this.className = "active"
            //点击某个li获取对应的index值作为参数进行对一个的商品列表的数据请求
            ajax({
                url: "http://chst.vip:1234/api/getbaicaijiaproduct",
                data: { titleid: this.index },
                success(res) {
                    console.log(res);
                    let resArr2 = res.result;
                    let content = document.getElementById("content");
                    let html2 = rander2(resArr2);
                    content.innerHTML = html2;
                    //获取进度条元素，利用定时器不断改变元素width值，实现进度条效果
                    let i = 0;
                    let n=0;
                    let m=126;
                    let timer = setInterval(function () {
                        let num=parseInt(n/126*100);
                        console.log(num);
                        for(let j=0;j<aside.length;j++){
                            aside[j].style.width = i + 'px';
                            aside[j].innerHTML=`${num}%`;
                            yiling[j].innerHTML=`已领${n}张/余${m}张`;
                        }
                        i++;
                        n++;
                        m--;
                        if(i>126){
                            clearInterval(timer);
                        }
                    }, 10)
                    // //对页面进行懒加载
                    // let count = 5
                    // window.onscroll = function () {
                    //     let scrollTop = document.documentElement.scrollTop;
                    //     let clientHeight = document.documentElement.clientHeight;
                    //     let scrollHeight = document.documentElement.scrollHeight;
                    //     let edge = scrollHeight - scrollTop - clientHeight;
                    //     if (edge < 300) {
                    //         count += 5;
                    //         resArr2 = res.result.splice(0, count);
                    //         if (res.result.length == 0) {
                    //             return
                    //         }
                    //         html2 = rander2(resArr2);
                    //         content.innerHTML += html2;
                    //     }
                    // }
                    

                }
            })
        }
    }
})


//进行titleid为0的数据请求，实现页面默认打开的商品列表数据展示
ajax({
    url: "http://chst.vip:1234/api/getbaicaijiaproduct",
    data: { titleid: 0 },
    success(res) {
        console.log(res);
        let resArr2 = res.result;
        let content = document.getElementById("content");

        let html2 = rander2(resArr2);
        content.innerHTML = html2;

        let i = 0;
        let n=0;
        let m=126;
        let timer = setInterval(function () {
            let num=parseInt(n/126*100);
            for(let j=0;j<aside.length;j++){
                aside[j].style.width = i + 'px';
                aside[j].innerHTML=`${num}%`
                yiling[j].innerHTML=`已领${n}张/余${m}张`;
            }
            i++;
            n++;
            m--;
            if(i>126){
                clearInterval(timer);
            }
        }, 10)
        // let count = 5
        // window.onscroll = function () {
        //     let scrollTop = document.documentElement.scrollTop;
        //     let clientHeight = document.documentElement.clientHeight;
        //     let scrollHeight = document.documentElement.scrollHeight;
        //     let edge = scrollHeight - scrollTop - clientHeight;
        //     if (edge < 300) {
        //         count += 5;
        //         resArr2 = res.result.splice(0, count);
        //         if (res.result.length == 0) {
        //             return
        //         }
        //         html2 = rander2(resArr2);
        //         content.innerHTML += html2;
        //     }

        // }
    }
})




